<#include "header.html">

<!-- main start -->
<script>
    function showcontent(content) {
        $('#content').html(content);
    }
    function addTab(title, url){
        var jq = top.jQuery;
        if (jq('#center').tabs('exists', title)){
            jq('#center').tabs('select', title);
        } else {
            var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
            jq('#center').tabs('add',{
                title:title,
                content:content,
                closable:true
            });
        }
    }
</script>



<body>
<!-- layout -->
<div class="easyui-layout" style="width:100%;height:100%;">
    <div region="north" split="false" title="North" style="width:100%;height: 100px;">
        <p style="padding:5px;margin:0;">North</p>
        <p>
            <a href="${request.contextPath}/manage/logout">logout</a>
        </p>
    </div>

    <div region="west" split="true" title="Tree" style="width:150px;height: 100%;">
        <p style="padding:5px;margin:0;">Select language:</p>
        <ul>
            <li><a href="javascript:void(0)" onclick="addTab('user list','${request.contextPath}/manage/user/userListPage')">user</a></li>
        </ul>
        <ul>
            <li><a href="javascript:void(0)" onclick="showcontent('java')">Java</a></li>
            <li><a href="javascript:void(0)" onclick="showcontent('cshape')">C#</a></li>
            <li><a href="javascript:void(0)" onclick="showcontent('vb')">VB</a></li>
            <li><a href="javascript:void(0)" onclick="showcontent('erlang')">Erlang</a></li>
        </ul>
        <ul>
            <a href="#" class="easyui-linkbutton" onclick="addTab('baidu','http://www.baidu.com')">google</a>
            <a href="#" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')">jquery</a>
            <a href="#" class="easyui-linkbutton" onclick="addTab('easyui','http://jeasyui.com/')">easyui</a>
        </ul>
    </div>

    <div id="center" region="center" title="Center" class="easyui-tabs" style="width: 100%;height:100%;">

    </div>

    <!--<div id="east" region="east" title="East" style="padding:5px;width:100px;height: 100%;">-->
    <!--</div>-->
    <!--<div id="south" region="south" title="South" style="padding:5px;width: 100%;height: 100px;">-->
    <!--</div>-->
</div>

<!--<div class="easyui-dialog" style="width:400px;height:200px"-->
     <!--data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">-->
    <!--dialog content.-->
<!--</div>-->



</body>



<!-- main end -->

<#include "footer.html">